<template>
	<view class="con pb200">
		<view class="box3-33b">
			
			<view v-if="isvodel&&progress != '100%'" class=" wh215-215 bg000 ra10 colorfff flex-ju-c mt20">
				{{progress}}
			</view>
			
			<view v-for="(item,index) in imgs" :key="index" class="a3box posire mt20">
				<view @click="moveimg(index)" class="wh50-50 ra20 flex-ju-c posiab right25 top15"
					style="background: rgba(0, 0, 0, 0.5);">
					<uni-icons type="closeempty" color="#fff"></uni-icons>
				</view>
				<!-- progress -->
				<view class="posire wh215-215 ra10 hidden bg000 colorfff " v-if="item.endsWith('.mp4')">
					<video autoplay muted :controls="false"  class="wh215-215 ra10 hidden" :src="item"></video>
				</view>
				
				<image v-else mode="aspectFill" class="wh215-215 ra10 hidden" :src="item"></image>
			</view>

			<view @click="addimg" class="a3box mt20">
				<view class="bgF6F7F8 wh215-215 flex-ju-c">
					<uni-icons type="plusempty" size="40" color="#999999"></uni-icons>
				</view>
			</view>
		</view>

		<view class="border-tEDEDED mt40 pt40">
			<input v-model="title" class="bgF6F7F8 height83 ra83 pl30 size26 mb30" placeholder="请填写标题~" />
			<view class="bgF6F7F8 pg30 ra20">
				<textarea v-model="content" maxlength="-1" auto-height placeholder="添加正文~" style="min-height: 300rpx;"
					class="width1000 size26"></textarea>
			</view>
		</view>

		<view class="border-tEDEDED mt30 pt30 color333">
			<view @click="getlocation" class="flex-ju-b pb30 border-bEDEDED">
				<view class="flex-a-i ">
					<image mode="widthFix" class="image width23 mr10" src="/static/img/dingwei.png"></image>
					{{address?address:'添加地点'}}
				</view>
				<uni-icons type="right" size="15" color="#CCCCCC"></uni-icons>
			</view>
			<view @click="gongkai" class="flex-ju-b pb30 border-bEDEDED mt30">
				<view class="flex-a-i ">
					<image mode="widthFix" class="image width30 mr10" src="/static/img/suo.png"></image>
					{{power==1?'公开可见':power==2?'仅自己可见': '不给谁看（已选' + no_uids.length +'）'}}
				</view>
				<uni-icons type="right" size="15" color="#CCCCCC"></uni-icons>
			</view>
			<view @click="isphoto" class="flex-a-i color999 size22 mt30">
				<view v-if="photo" class="wh25-25 ra25 border27A752 flex-ju-c mr10">
					<view class="wh15-15 ra15 bg27A752 "></view>
				</view>
				<view v-else class="wh25-25 ra25 border999 flex-ju-c mr10">
				</view>
				保存到相册
			</view>
		</view>

	</view>

	<view class="posifi bgfff width1000 bottom0 safe-area-inset-bottom">
		<view class="border-tEDEDED mt30 pt30 color333 pb30 flex-ju-c  size20">
			<!-- <view class="center">
				<image mode="widthFix" class="image width55 mb10" src="/static/img/bianji.png"></image>
				编辑
			</view> -->
			<view @click="prview" class="center mr40 ml40">
				<image mode="widthFix" class="image width55 mb10" src="/static/img/yulan.png"></image>
				预览
			</view>
			<view @click="fabu" class="ibgto-27A752-C6FF00 wh470-100 flex-ju-c size30 bold ra100">
				<!-- <view @click="navto('preview')" class="ibgto-27A752-C6FF00 wh470-100 flex-ju-c size30 bold ra100"> -->
				发布笔记
			</view>
		</view>
	</view>

	<uni-popup borderRadius="15px 15px 0 0" background-color="#F5F7F9" ref="upfocus" type="bottom">
		<view class="con pt30 pb50 size26 color333">
			<view @click="setpower(1)" class="bgfff height100 flex-ju-c bold ">
				公开可见
			</view>
			<view @click="setpower(2)" class="bgfff height100 flex-ju-c  bold ">
				仅自己可见
			</view>
			<view @click="getuser(1)" class="bgfff height100 flex-ju-c  bold ">
				不给谁看
			</view>
		</view>
	</uni-popup>
	<uni-popup borderRadius="15px 15px 0 0" background-color="#F5F7F9" ref="getuser" type="bottom">
		<view class="con pt30 pb20 size26 color333">
			
			<view class="flex-ju-b mb20">
				<view class="flex-a-i flex1 height70 ra70 bgEDEDED pl20 ">
					<image mode="widthFix" class="image width26" src="/static/img/sousou.png"></image>
					<input v-model="usertext" class="size26 pl10" placeholder="搜索"/>
				</view> 
				<view @click="queuser" class="wh120-60 ra10 ml15 flex-ju-c ibgto-27A752-C6FF00">
					搜索
				</view>
			</view>
			<scroll-view @scrolltolower="scrolltolower" scroll-y class="height60vh">
				<checkbox-group @change="checkboxChange">
					<label v-for="item in users" :key="item.uid" class="flex-ju-b bgfff  pg20-20">
						<view class="flex-a-i">
							<image :src="item.avatar?item.avatar:'/static/mo.png'" class="wh50-50 ra50 mr15"></image>
							{{item.nickname}}
						</view>
						<checkbox :value="item.uid" color="#27A752" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
			</scroll-view>
			<view @click="okuser" class="height80 mt20 ra50 flex-ju-c ibgto-27A752-C6FF00">
				确定
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				no_uids:[],
				usertext:"",
				photo: false,
				imgs: [],
				title: "",
				content: "",
				address: "",
				power: 1,
				page:1,
				tpage:1,
				users:[],
				progress:"",
				isvodel:"",
				tempFile:"",
				yuanvideo:"1"
			}
		},
		onLoad(option) {
			if(option.video){
				this.isvodel=option.video
				this.yuanvideo = option.yuanvideo
				
				const downloadTask = uni.downloadFile({
					url:this.videoURL+'download_video/?file_path=out/'+option.video+'.mp4',
					success: (res) => {
						if (res.statusCode === 200) {
							this.tempFile = res.tempFilePath
							this.imgs.push(res.tempFilePath)
						}
					},
					fail(red) {
						console.log('下载成功1',red);
					}
				});
				
				downloadTask.onProgressUpdate((res) => {
					this.progress = res.progress +'%'
				});
				
				
				
			}
			
		  
		},
		mounted() {
		},
		
		methods: {
			okuser(){
				if(!this.no_uids.length){
					uni.showToast({
						title:"请选择",
						icon:"none"
					})
					return
				}
				this.power=3
				this.$refs.upfocus.close()
				this.$refs.getuser.close()
			},
			checkboxChange(e){
				this.no_uids=e.detail.value
			},
			queuser(){
				this.tpage=1
				this.users =[]
				this.getuser()
			},
			scrolltolower(){
				this.tpage++
				this.getuser()
			},
			getuser(type){
				this.http('/api/get_user_list',{
					page:this.tpage,
					limit:20,
					like:this.usertext
				}).then(res=>{
					if(type){
						this.$refs.getuser.open()
					}
					this.users = [...this.users,...res.data.list]
				})
			},
			prview() {
				var obj = {
					title: this.title,
					content: this.content,
					imgs: this.imgs,
					address: this.address,
					power: this.power,
					no_uids:this.no_uids,
					photo:this.photo
				}
				uni.navigateTo({
					url: "preview?info=" + JSON.stringify(obj)
				})
			},
			isphoto() {
				this.photo = !this.photo
			},
			setpower(type) {
				this.power = type
				this.$refs.upfocus.close()
			},
			getlocation() {
				uni.getLocation({
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						console.log(res)
						
						uni.chooseLocation({
							latitude:latitude,
							longitude:longitude,
							success: (res) => {
								this.address = res.name
							},
							fail(res) {
								console.log(res,"hhhh")
							}
						});
					},
					fail: (res) => {
						uni.showModal({
							content: JSON.stringify(res),
							showCancel: false
						})
					}
				});
			},
			getimgpath() {
				uni.showLoading({
					title: "正在保存"
				})
				return new Promise((resolve, reject) => {
					var ff = []
					for (let i = 0; i < this.imgs.length; i++) {
						uni.downloadFile({
							url: this.imgs[i],
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: res => {
											ff.push(res.path)
											if (ff.length == this.imgs.length) {
												resolve()
											}
										},
										fail: (res) => {
											uni.showModal({
												content: JSON.stringify(res),
												showCancel: false
											})
										}
									})
								}
							}
						})
					}
				})
			},
			fabu() {


				if (this.imgs.length < 1) {
					uni.showToast({
						title: "上传图片",
						icon: "none"
					})
					return
				}
				if (!this.title.trim()) {
					uni.showToast({
						title: "输入标题",
						icon: "none"
					})
					return
				}
				if (!this.content.trim()) {
					uni.showToast({
						title: "输入正文",
						icon: "none"
					})
					return
				}

				if (this.photo) {
					this.getimgpath().then(res => {
						uni.hideLoading()
						this.infid()
					})
				} else {
					this.infid()
				}

			},
			infid() {
				uni.showLoading()
				if(this.yuanvideo){
				
					uni.uploadFile({
						url: this.apiurl +
							'/api/upload_aliyun_video',
						fileType: 'video',
						name: 'file',
						filePath:this.tempFile,
						formData: {
							filename: `${Date.now()}`,
						},
						header: {
							'Authori-zation': 'Bearer ' + uni.getStorageSync(
								"token"),
						},
						success: (uploadFileRes) => {
							var ddt = JSON.parse(uploadFileRes.data)
							
							var aobj = {path:'',origin_path:''}
							var arrobj = []
							this.imgs.map(item=>{
								if(item.indexOf('https://') != -1 || item.indexOf('http://') != -1){
									aobj.path = item
									arrobj.push(aobj)
								}else{
									aobj.path = ddt.data.info.url
									aobj.origin_path = this.yuanvideo
									arrobj.push(aobj)
								}
							})
							this.srimg(arrobj)
						}
					})
					return
				}
				
			
				var aobj = {path:'',origin_path:''}
				var arrobj = []
				this.imgs.map(item=>{
					aobj.path = item
					arrobj.push(aobj)
				})
				this.srimg(arrobj)
				
			},
			srimg(imgs){
			
				this.http('/api/user/data', {
					title: this.title,
					content: this.content,
					imgs,
					address: this.address,
					power: this.power,
					no_uids:this.no_uids
				}, 'post').then(res => {
					
					var ids = uni.getStorageSync('task_id')
					if(ids.length){
						ids.map((item,index)=>{
							if(item.id == this.isvodel){
								ids.splice(index,1)
							}
						})
						uni.setStorageSync('task_id',ids)
					}
					
					
					uni.showToast({
						title: "发布成功",
						icon: "none"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/user/index"
						})
					},500)
				})
			},
			moveimg(index) {
				this.imgs.splice(index, 1)
			},
			addimg() {
				this.upimg().then(res => {
					this.imgs.push(...res)
				})
			},
			gongkai() {
				this.$refs.upfocus.open()
			}
		}
	}
</script>

<style>

</style>